<template>
	<el-form ref="formRef" :model="form" :inline="true" label-width="80px" class="role-search-form container">
		<el-form-item label="事件ID">
			<el-input v-model="form.eventId" placeholder="请输入事件ID" clearable @keydown.enter="handleSearch" />
		</el-form-item>

		<el-form-item label="文件名">
			<el-input v-model="form.fileName" placeholder="请输入文件名" clearable @keydown.enter="handleSearch" />
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="handleSearch">搜索</el-button>
			<el-button @click="resetSearch">重置</el-button>
			<slot name="customButton"></slot>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['handleSearch', 'resetSearch']);

const formRef = ref(null);
const form = ref({
	eventId: '',
	fileName: '',
});

const handleSearch = () => {
	emit('handleSearch', form.value);
};

const resetSearch = () => {
	form.value.eventId = '';
	form.value.fileName = '';
	emit('resetSearch');
};
</script>

<style lang="less" scoped></style>
